<template>
  <div>
    <el-dialog 
      width="1200px"
      :title="$t('广告分组')"
      :close-on-click-modal="false"
      :visible.sync="isShow"
    >

      <div class="table_box">
        <el-table :data="tableData">
        <el-table-column prop="name" :label="$t('名称')"></el-table-column>
        <el-table-column prop="size" :label="$t('文件大小')"></el-table-column>
        <el-table-column prop="image_num" :label="$t('图片个数')"></el-table-column>
        <el-table-column prop="video_num" :label="$t('视频个数')"></el-table-column>
        <el-table-column prop="duration" :label="$t('视频时长')"></el-table-column>
        <el-table-column prop="created" :label="$t('创建时间')"></el-table-column>
        <el-table-column :label="$t('操作')" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleChange(scope.row)"
              >{{$t('选择')}}</el-button
            >
          </template>
        </el-table-column>
      </el-table>

        <div class="pagination_box ">
          <el-pagination
            background
            
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="page_size"
            layout="total, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>


  </div>
  
</template>

<script>
import util from '@/assets/js/util.js'
export default {
  name: "adverGroup",
  data() {
    return {
      page: 1,
      page_size: 20,
      total: 0,
      isShow: false,
      name: '',
      tableData: [],
    };
  },
  props: {
    type: {
      type: [Number, String],
      default: 0
    }
  },
  mounted() {},
  methods: {
    show() {
      this.name = ''
      this.page = 1
      this.page_size = 20
      this.isShow = true;
      setTimeout(() => {
        this.getData();
      }, 150);
    },
    getData() {
      util.$http('/screenAdv/groupList?page=' + this.page, {
        page_size: this.page_size
      })
      .then(res=>{
        if(res.code == 1) {
          this.total = res.data.total
          this.tableData = res.data.list
        }
      })
    },
    handleCurrentChange(val) {
      this.page = Number(val)
      this.getData();
    },
    handleChange(row) {
      this.isShow = false;
      let data = {
        id: row.id,
        name: row.name,
        size: row.size,
        duration: row.duration,
      }
      this.$emit('hide', data, this.type)
    }
  }
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}
.head_search .sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
.head_tip {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}
.head_options .sub_btn {
  height: 34px;
  border: 0;
  outline: 0;
  padding: 0 15px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
}
.head_options .txt_list {
  font-weight: bold;
  margin-right: 25px;
}
.iconfont {
  font-size: 15px;
  margin-right: 5px;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 10px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
